import React, { startTransition, useEffect, useState } from 'react'
import '../css/my.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'

export default function My() {
  const navigate = useNavigate()
  const [user, setUser] = useState({})
  const [goodcar, setGoodcar] = useState([])
  const [orderls] = useState([
    { id: 1, name: '待付款', icon: 'iconfont icon-qianbao-', status: '待付款' },
    { id: 2, name: '待发货', icon: 'iconfont icon-daishouhuo', status: '待发货' },
    { id: 3, name: '已完成', icon: 'iconfont icon-yiwancheng', status: '待收货' },
  ])
  const [toolls] = useState([
    { id: 1, name: '收货地址', icon: 'iconfont icon-shouhuodizhi', path: '/address' },
    { id: 2, name: '我的评价', icon: 'iconfont icon-wodepingjia', path: '/comment' },
    { id: 3, name: '签到中心', icon: 'iconfont icon-qiandao', path: '/signin' },
    { id: 4, name: '领券中心', icon: 'iconfont icon-lingquanzhongxin', path: '/coupons' },
    { id: 6, name: '设置', icon: 'iconfont icon-shezhi', path: '/setting' },
  ])
  const getgomodel = () => {
    axios.get('/cxb/getgomodel').then(res=>{
      setGoodcar(res.data.data)
    })
  }
  const [coupon, setGetCoupon] = useState([])
  const getcoupon = () => {
    axios.get('/fxs/coupon').then(res => {
      setGetCoupon(res.data.list)
    })
  }
  useEffect(() => {
    setUser(JSON.parse(sessionStorage.getItem('users')))
    getgomodel()
    getcoupon()
  }, [])
  return (
    <div className='cxb_my_bigbox'>
      <div className='cxb_my_bigbox_top'>
        <div className='cxb_my_bigbox_top_userimg'>
          <img src={user.avatar} alt='' />
          <div className='cxb_my_bigbox_top_username'>
            <h1>{user.username}</h1>
            <p>{user.phone}</p>
          </div>
        </div>
        <div className='cxb_my_bigbox_top_menu'>
          <li onClick={()=>{
            startTransition(()=>{
              navigate('/collection')
            })
          }}>
            <p>收藏夹</p>
            <p>{goodcar.filter(i=>i.sc.includes(user._id)).length}</p>
          </li>
          <li>
            <p>关注</p>
            <p>37</p>
          </li>
          <li>
            <p>足迹</p>
            <p>99</p>
          </li>
          <li onClick={()=>{
            startTransition(()=>{
              navigate('/getCoupon')
            })
          }}>
            <p>卡券</p>
            {console.log(new Date(),'----', coupon)
            }
            <p>{coupon.filter(i=>new Date(i.endTime)>new Date(Date.now())).length}</p>
          </li>
        </div>
      </div>
      <div className='cxb_my_bigbox_bottom'>
        <div className='cxb_my_bigbox_bottom_order'>
          <h1>我的订单</h1>
          <div className='cxb_my_bigbox_bottom_order_list'>
            {orderls.map(item => {
              return <li key={item.id} onTouchStart={() => {
                startTransition(() => {
                  navigate('/myorder', { state: { state: item.status } })
                })
              }} className='cxb_my_bigbox_bottom_order_list_li'>
                <span className={item.icon}></span>
                <p>{item.name}</p>
              </li>
            })
            }
            <li onTouchStart={() => {
              startTransition(() => {
                navigate('')
              })
            }} className='cxb_my_bigbox_bottom_order_list_li'>
              <span className='iconfont icon-tuikuanshouhou'></span>
              <p>退款/售后</p>
            </li>
          </div>
        </div>
        <div className='cxb_my_bigbox_bottom_tools'>
          <h1>常用工具</h1>
          <div className='cxb_my_bigbox_bottom_tools_list'>
            {toolls.map(item => {
              return <li key={item.id} onClick={() => {
                startTransition(() => {
                  navigate(item.path)
                })
              }} className='cxb_my_bigbox_bottom_tools_list_li'>
                <span className={item.icon}></span>
                <p>{item.name}</p>
              </li>
            })
            }
          </div>
        </div>
      </div>
    </div>
  )
}
